<template>
  <div
    class="aidiadiv frcc"
    @click="jiejingclick()"
    :style="{ backgroundColor: isopen ? '#404a99' : '#404a4dbb' }"
  >
    <div class="aidiadivimg"></div>
    <el-button type="primary" size="default" @click="sv" style="position: absolute; top: -50px;">保存视角</el-button>
    
  </div>
  <!-- <panorama /> -->
  <panorama v-if="earthStore.showPanorama" />
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, defineExpose } from "vue";

import { useEarthStore } from "@/stores/earth";
import { remove } from "lodash";

import Imgsearch from "./imgsearch";
import _ from "lodash";

import { useLocalStorage } from "@vueuse/core";

let resDefaultCamera = useLocalStorage('defaultCamera', '');


setInterval(() => {
}, 1000);

defineExpose({
  sv
})




function sv(params) {
  resDefaultCamera.value = JSON.stringify([earth.camera.position,earth.camera.rotation]);
  
}


onMounted(() => {
  window.quanjingcom = getCurrentInstance();

  
  setTimeout(() => {
    
    if (resDefaultCamera.value != '') {
      let p = JSON.parse(resDefaultCamera.value)
      console.log(p);
      earth.camera.flyTo(p[0],1,p[1],0) 
    }
  }, 2000);
})


const earthStore = useEarthStore();

const imgsearch = Imgsearch();

let isopen = ref(false);

function jiejingclick(params) {
  isopen.value = !isopen.value; // 切换状态

  // 添加图层

  // 添加全景窗口

  // 添加联动功能
  // 街景角度
  // 当前场景朝向

  if (isopen.value) {
    addwmslayer();

    // 添加事件
    addJiejingEvent();
  } else {
    removewmslayer(); // 移除图层
  }
}

function addJiejingEvent(params) {
  // 添加图层查询方法
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction( (event) => {
    // wmts 查询
    imgsearch.getImgFeature(event);
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

function pointclick(item) {
  let prename = item.id.split("_")[0];
  let filename = "";
  if (_.has(item.properties, "name")) {
    filename = item.properties["name"];
  }
  if (_.has(item.properties, "filename")) {
    filename = item.properties["filename"];
  }

  earthStore.panoramaurl = "/juhetuceng/" + prename + "10m/" + filename;
  earthStore.showPanorama = true;
}

function removewmslayer(params) {
  // earth.sceneTree.$refs['jiejinglayer'].destory()
  earth.sceneTree.root.children.splice(earth.sceneTree.root.children.length - 1, 1);
}

function addwmslayer() {
  let _srs = "EPSG:4326";
  let basemapSource = new Cesium.WebMapTileServiceImageryProvider({
    //  对与url  很多博客都说要进行 如下拼接
    // 后端返回的wmts/rest/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png
    // 其实不用拼接  只需要后端返回的/wtms路径即可
    url: "/jiejing/geoserver/gwc/service/wmts", //服务地址 服务地址只需要后端返回的 /WMTS   不需要给后面拼接任何东西，
    layer: `test_tif:jiejing`, //图层名称 : "pucheng:satellite"
    style: "",
    format: "image/png",
    tileMatrixSetID: _srs, // "EPSG:900913"
    // 地图飞入  定位的坐标  后端返回的数据
    // rectangle: rec,
    // 必须加  不然地图出不来
    //之所以要在这里提出这个tileMatrixLabels参数，是因为GeoServer在缓冲切分瓦片时对每一个缩放级别的存储目录没有使用相应的数字，而使用了网格+级别的方式来命名，如“EPSG:9100913:10”表示的是使用“EPSG:9100913”网格切分的第10级瓦片。
    tileMatrixLabels: [
      `${_srs}:0`,
      `${_srs}:1`,
      `${_srs}:2`,
      `${_srs}:3`,
      `${_srs}:4`,
      `${_srs}:5`,
      `${_srs}:6`,
      `${_srs}:7`,
      `${_srs}:8`,
      `${_srs}:9`,
      `${_srs}:10`,
      `${_srs}:11`,
      `${_srs}:12`,
      `${_srs}:13`,
      `${_srs}:14`,
      `${_srs}:15`,
      `${_srs}:16`,
      `${_srs}:17`,
      `${_srs}:18`,
      `${_srs}:19`,
      `${_srs}:20`,
    ],
    // 必须加  不然地图出不来
    tilingScheme: new Cesium.GeographicTilingScheme({
      //此处很重要，很重要。。。
      numberOfLevelZeroTilesX: 2,
      numberOfLevelZeroTilesY: 1,
    }),
    // tilematrixset: _srs,
    // maximumLevel: 18,
  });

  earth.sceneTree.root.children.push({
    ref: "jiejinglayer",
    czmObject: {
      xbsjType: "Imagery",
      name: "jiejinglayer",
      xbsjImageryProvider: {
        type: "WebMapServiceImageryProvider",
      },
    },
  });

  setTimeout(() => {
    const layerRef = earth.sceneTree.$refs["jiejinglayer"];
    layerRef.czmObject.xbsjImageryProvider.WebMapServiceImageryProvider._imageryProvider = basemapSource;
  }, 500);
}
</script>
<style lang="scss" scoped>
.aidiadiv {
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: 151px;
  left: 5px;
  // background-color: rgba(71, 71, 71, 0.8);
  border-radius: 5px;
  cursor: pointer;
  &:hover {
    background-color: #404a4d22;
  }
  .aidiadivimg {
    width: 40px;
    height: 40px;
    background-image: url(/shujuguanli/jiejing.png);
    background-size: 100% 100%;
  }
}
</style>
